import React, { useEffect } from 'react'
import styles from '../index.module.scss'
import { Avatar, Button, Popconfirm, Table } from 'antd'
import { deleteUserApi, getManageUserApi, lockUserApi } from '@/common/api'
import UsePaginatedHook from '@/components/ComponentHook/UsePaginatedHook'
import { UserOutlined } from '@ant-design/icons'
export default function ManageUser() {

  const { list, setList, endRef } = UsePaginatedHook(getManageUserApi, 20,{})
  const columns = [
    {
      title: '头像',
      dataIndex: 'avator',
      key: 'avator',
      render: text => 
        <div>
       {text? <Avatar src={`http://localhost:5000/${text}`} />:<Avatar icon={<UserOutlined />} />}
      </div>,
      width:"5%"
    },
    {
      title: '账号',
      dataIndex: 'username',
      key: 'username',
      render: text => <p>{text}</p>,
      width:"5%"
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      render: text => <p>{text}</p>,
      width:"5%"
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      render: text => <p>{text===0?"女":"男"}</p>,
      width:"5%"
    },
    {
      title: '个人简介',
      dataIndex: 'signature',
      key: 'signature',
      render: text => <div>{text}</div>,
      width:"10%"
    },
    {
      title: '粉丝',
      dataIndex: 'fansNumber',
      key: 'fansNumber',
      render: text => <p>{ text}</p>,
      width:"5%"
    },
    {
      title: '关注',
      dataIndex: 'attentionNumber',
      key: 'attentionNumber',
      render: text => <p>{ text}</p>,
      width:"5%"
    },
    {
      title: '操作',
      dataIndex: 'state',
      key: 'state',
      render: (text, record) => 
      (<div className='operateBtn'>
        <Popconfirm
          description={text==="1"?"确定冻结该用户?":"确定解冻该用户?"}
          okText="确定"
          onConfirm={()=>lockFn(record)}
          cancelText="取消"
        >
          <Button>{text==="1"?"冻结":"解除冻结"}</Button>
        </Popconfirm>
        <Popconfirm
          description="确定删除该用户?"
          okText="确定"
          onConfirm={()=>deleteUser(record)}
          cancelText="取消"
        >
          <Button>删除</Button>
        </Popconfirm>
      </div>),
      width:"5%"
    }
  ];
  const lockFn = async (record) => {
    const { _id, state } = record
    const RES = await lockUserApi({ userId: record._id, state: record.state })
    if (RES.code === 200) {
      setList(pre=>pre.map(item=>item._id===_id?{...item,state:state==="1"?"2":"1"}:item))
    }
  }
  //删除用户
  const deleteUser = async (record) => {
    const { _id } = record
    const res = await deleteUserApi({ userId: _id })
    if (res.code === 200) {
      setList(pre => pre.filter(item => item._id !== _id))
    }
  }
  return (
    <div className={styles.manageUser}>
      <Table rowKey="_id" pagination={false}  columns={columns} dataSource={list} />
    </div>
  )
}
